// JSON解析工具 - 用于解析AssetManifest.json文件
import 'dart:convert';

// 轮播图组件 - 提供图片轮播功能
import 'package:carousel_slider/carousel_slider.dart';
// Flutter基础组件 - 提供Material Design组件
import 'package:flutter/material.dart';
// 资源访问工具 - 用于访问应用内资源文件
import 'package:flutter/services.dart';

import '../components/carousel_indicator.dart';
import '../components/image_carousel.dart';

/// "我的"页面组件
///
/// 这是一个StatefulWidget，因为需要管理轮播图的状态和资源加载状态
class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  /// 轮播图图片路径列表
  ///
  /// 存储从AssetManifest.json中获取的banner目录下的所有图片路径
  List<String> _bannerImages = [];

  /// 加载状态标识
  ///
  /// true表示正在加载资源，false表示加载完成或失败
  bool _notLoading = true;

  /// 当前轮播图索引
  ///
  /// 用于跟踪和指示当前显示的轮播图位置
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    // 组件初始化时自动加载轮播图资源
    _loadBannerImages();
  }

  /// 动态加载banner目录下的所有图片资源
  ///
  /// 该方法会:
  /// 1. 读取AssetManifest.json文件
  /// 2. 解析JSON内容
  /// 3. 过滤出banner目录下的图片路径
  /// 4. 更新状态
  Future<void> _loadBannerImages() async {
    try {
      // 从Flutter资源包中读取AssetManifest.json文件内容
      final manifestContent = await rootBundle.loadString('AssetManifest.json');
      // 将JSON字符串解析为Map对象
      final manifestMap = json.decode(manifestContent) as Map<String, dynamic>;

      // 更新组件状态
      setState(() {
        // 从资源清单中过滤出lib/banner/目录下的所有图片路径
        _bannerImages = manifestMap.keys
            .where((key) => key.startsWith('lib/banner/')) // 只保留banner目录下的资源
            .toList(); // 转换为列表

        // 标记资源加载完成
        _notLoading = false;
      });
    } catch (e) {
      // 加载失败时也更新状态，避免无限加载
      setState(() {
        _notLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    // 如果正在加载资源，显示圆形进度指示器
    if (_notLoading) {
      return Center(
        child: CircularProgressIndicator() // 加载动画
      );
    }

    // 如果没有加载到任何轮播图资源，显示提示文本
    if (_bannerImages.isEmpty) {
      return Center(
        child: Text('暂无轮播图资源') // 资源缺失提示
      );
    }

    // 主页面布局
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            // 使用Stack将指示器覆盖在轮播图上
            Stack(
              alignment: Alignment.bottomCenter,
              children: [
                // 轮播图组件
                ImageCarousel(
                  images: _bannerImages,
                  onPageChanged: (index, reason) {
                    setState(() {
                      _currentIndex = index;
                    });
                  },
                  currentIndex: _currentIndex,
                ),
                // 指示器组件，添加底部边距使其位于图片上方
                CarouselIndicator(
                  count: _bannerImages.length,
                  currentIndex: _currentIndex,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
